<template>
  <div class="master-wrap" style="padding: 10px 5px">
    <div class="master-list">
      <el-row :gutter="20">
        <el-col :lg="8" :xl="6">
          <div class="master-item master-item-new">
            <el-button
              class="new-btn"
              icon="el-icon-plus"
              @click="onClickAdd">
              新增大师
            </el-button>
          </div>
        </el-col>
        <el-col
          v-for="(item, index) in list"
          :key="index"
          :lg="8"
          :xl="6">
          <div class="master-item">
            <div class="master-item-body">
              <div class="master-item-meta">
                <div class="master-item-meta-avatar">
                  <div class="master-item-meta-avatar-image">
                    <img :src="item.avatarImgUrl" alt="">
                  </div>
                </div>
                <div class="master-item-meta-detail">
                  <div class="master-item-meta-title">
                    {{ item.name }}
                  </div>
                  <div class="master-item-meta-description">
                    {{ item.summary }}
                  </div>
                </div>
              </div>
            </div>
            <ul class="master-item-actions">
              <li>
                <span @click="$refs.editDialog.show(id, item.id)" >编辑</span>
              </li>
              <li>
                <span @click="onDelete(item.id)">删除</span>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>
    <edit-dialog ref="editDialog" @onSave="onSave"></edit-dialog>
  </div>
</template>

<script>
import EditMixin from '../EditMixin'
import EditDialog from './EditDialog.vue'
import { getMaster } from '@/api/investigation'
import { deleteMaster } from '@/api/master'

export default {
  mixins: [ EditMixin ],
  components: {
    EditDialog
  },
  data() {
    return {
      list: []
    }
  },
  created() {
    this.getMasters()
  },
  methods: {
    getMasters() {
      getMaster(this.id).then(res => {
        if (res.status === 200) {
          this.list = res.data
        }
      })
    },
    onDelete(id) {
      this.$confirm('确认删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteMaster(id)
      })
    },
    deleteMaster(id) {
      deleteMaster(id).then(res => {
        if (res.status === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getMasters()
        }
      })
    },
    onClickAdd() {
      this.$refs.editDialog.show(this.id)
    },
    onSave() {
      this.getMasters()
    }
  }
}
</script>

<style lang="scss" scoped>
.master-list {
  overflow: hidden;
  .master-item {
    cursor: pointer;
    border: 1px solid #e8e8e8;
    margin-bottom: 16px;
    &.master-item-new {
      border: 0;
    }
    .master-item-body {
      padding: 24px;
      zoom: 1;
    }
    .master-item-actions {
      margin: 0;
      padding: 0;
      list-style: none;
      background: #fafafa;
      border-top: 1px solid #e8e8e8;
      zoom: 1;
      span {
        padding: 8px 10px;
        &:hover {
          color: #409EFF;
        }
      }
    }
  }
}
.master-item-actions {
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
  }
  &>li {
    float: left;
    margin: 12px 0;
    color: rgba(0,0,0,.45);
    text-align: center;
    width: 50%;
    &:not(:last-child) {
      border-right: 1px solid #e8e8e8;
    }
  }
}
.master-item-meta {
  &-avatar {
    float: left;
    padding-right: 16px;
    &-image {
      width: 48px;
      height: 48px;
      border-radius: 48px;
      background: #eee;
      overflow: hidden;
      &>img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
  &-title {
    overflow: hidden;
    color: rgba(0,0,0,.85);
    font-weight: 500;
    font-size: 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 12px;
  }
  &-description {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    height: 64px;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin-bottom: 1em;
    color: rgba(0,0,0,.45);
  }
}
.new-btn {
  background-color: #fff;
  border-radius: 2px;
  width: 100%;
  height: 210px;
  border-style: dashed;
}
</style>